<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor
        :itemList="[
          { name: 'box-base', title: '基础信息' },
        ]"
      />
    </div>

    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <div id="box-base" class="box-title">基础信息</div>
          <customFormItem label="标签字段" name="labelField" :parent="_self" :form="form"/>
          <customFormItem label="值字段" name="valueField" :parent="_self" :form="form"/>
          <customFormItem label="图例名称" name="legend" :parent="_self" :form="form"/>
          <customFormItem label="坐标轴" name="axis" :parent="_self" :form="form"
          :type="constCommon.formItemType.selectStatic.name"
            :config="{ options: axisList }" />
          <customFormItem label="堆叠" name="stack" :parent="_self" :form="form"/>
          <customFormItem label="排序" name="sort" :parent="_self" :form="form" :type="constCommon.formItemType.inputNumber.name"/>
          <customFormItem label="是否系列" name="flagSeries" :parent="_self" :form="form" :type="constCommon.formItemType.switch.name"/>
          <customFormItem label="系列名称" name="seriesType" :parent="_self" :form="form"
          :type="constCommon.formItemType.selectStatic.name"
            :config="{ options: serieslist }" />
          <customFormItem
          label="Y轴索引" name="yAxisIndex" :parent="_self" :form="form"
          :disabled="!(form.flagSeries && form.axis == 'Y')"
          :type="constCommon.formItemType.inputNumber.name"
          />
          <customFormItem label="备注" name="remarks" :parent="_self" :form="form"  :type="constCommon.formItemType.textarea.name" fullWidth :config="{maxlength: 200, maxRows: 3}"/>
        </template>
      </customForm>

    </div>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'

export default {
  data() {
    return {
      form: {},
      viewData: {},
      axisList: [{
        label: '不显示',
        value: ''
      },
      {
        label: 'X轴',
        value: 'X'
        },
        {
        label: 'Y轴',
        value: 'Y'
      }],
      serieslist: [{
        label: '折线',
        value: 'line'
      },
      {
        label: '柱状',
        value: 'bar'
        },
        {
        label: '饼状',
        value: 'pie'
      }],
    }
  },
  created() {
    this.$emit('event-register', {
      validate: callback => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)

        this.$set(this.form, 'reportId', initData.id)

        this.$set(this.form, 'flagSeries', this.form.flagSeries == undefined ? false : this.form.flagSeries)
      },
      afterSave: () => {
      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {},
      beforeFlow: flowButtonKey => {
        return true
      },
      afterFlow: flowButtonKey => {},
      beforeClose: () => {
        return true
      }
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object
  },
  components: {customAnchor},
  computed: {},
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>
